<%--
  Created by IntelliJ IDEA.
  User: 86183
  Date: 2022/9/1
  Time: 17:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/lib/layui-v2.5.5/css/layui.css"
          media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/css/public.css" media="all">
    <%--dtree 样式--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui_ext/dtree/dtree.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui_ext/dtree/font/dtreefont.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <!-- 搜索条件 -->
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">角色名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="roleName" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn" lay-submit lay-filter="data-search-btn"><i
                                    class="layui-icon layui-icon-search"></i>搜索
                            </button>
                            <button type="reset" class="layui-btn layui-btn-warm"><i
                                    class="layui-icon layui-icon-refresh-1"></i>重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <!-- 表格工具栏 -->
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>添加 </button>
            </div>
        </script>

        <!-- 数据表格 -->
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <!-- 行工具栏 -->
        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete"><i class="layui-icon layui-icon-close"></i>删除</a>
            <a class="layui-btn layui-btn-xs data-count-edit" lay-event="grantMenu"><i class="layui-icon layui-icon-edit"></i>分配菜单</a>
        </script>

        <!-- 添加和修改窗口 -->
        <div style="display: none;padding: 5px" id="addOrUpdateWindow">
            <form class="layui-form" style="width:90%;" id="dataFrm" lay-filter="dataFrm">
                <div class="layui-form-item">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-block">
                        <!-- 角色编号 -->
                        <input type="hidden" name="id">
                        <input type="hidden" name="_method">
                        <input type="text" name="roleName" lay-verify="required" autocomplete="off"
                               placeholder="请输入角色名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色备注</label>
                    <div class="layui-input-block">
                        <textarea class="layui-textarea" name="roleDesc" id="roleDesc"></textarea>
                    </div>
                </div>
                <div class="layui-form-item layui-row layui-col-xs12">
                    <div class="layui-input-block" style="text-align: center;">
                        <button type="button" class="layui-btn" lay-submit lay-filter="doSubmit"><span
                                class="layui-icon layui-icon-add-1"></span>提交
                        </button>
                        <button type="reset" class="layui-btn layui-btn-warm"><span
                                class="layui-icon layui-icon-refresh-1"></span>重置
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 分配菜单的弹出层 开始 -->
        <div style="display: none;" id="selectRoleMenuDiv">
            <ul id="roleTree" class="dtree" data-id="0"></ul>
        </div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/statics/layui/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
    layui.extend({
        dtree:"${pageContext.request.contextPath}/statics/layui_ext/dtree/dtree", //dtree.js 的路径
    }).use(['form', 'table', 'laydate', 'jquery','layer',"dtree"], function () {
        //定义模块引用变量
        var $ = layui.jquery,
            form = layui.form,
            laydate = layui.laydate,
            dtree=layui.dtree,
            layer = layui.layer,
            table = layui.table;
        //渲染表格组件
        var tableIns = table.render({
            elem: '#currentTableId',
            url: '${pageContext.request.contextPath}/admin/role/list',
            toolbar: '#toolbarDemo',
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'id', width: 100, title: '角色编号', align: "center"},
                {field: 'roleName', minWidth: 150, title: '角色名称', align: "center"},
                {field: 'roleDesc', minWidth: 200, title: '角色描述', align: "center"},
                {title: '操作', minWidth: 120, toolbar: '#currentTableBar', align: "center"}
            ]],
            page: true,
            done: function (res, curr, count) {
                //判断当前页码是否是大于1并且当前页的数据量为09/
                if (curr > 1 && res.data.length == 0) {
                    var pageValue = curr - 1;
                    //刷新数据表格的数据
                    tableIns.reload({
                        page: {curr: pageValue}
                    });
                }
            }
        });
        //搜索工具栏点击事件
        form.on("submit(data-search-btn)",function(data){
            tableIns.reload({
                where:data.field,
                page:{
                    curr:1
                }
            })
            return false;
        })
        //监听表格添加工具栏
        table.on("toolbar(currentTableFilter)",function(obj){
            switch (obj.event){
                case "add":
                    openAddWindow();
                    break;
            }
        })
        var url,mainIndex;
        //打开添加角色弹窗
        function openAddWindow(){
            mainIndex=layer.open({
                type:1,
                title:"添加角色",
                area:["800px","400px"],
                content:$("#addOrUpdateWindow"),
                success:function(){
                    $("#dataFrm")[0].reset();
                    url="/admin/role/addRole"
                }
            })
        }
        //打开修改角色对话框
        function openUpdateWindow(data){
            mainIndex=layer.open({
                type:1,
                title:"修改角色",
                area:["800px","400px"],
                content:$("#addOrUpdateWindow"),
                success:function(){
                    form.val("dataFrm",data);
                    url="/admin/role/updateRole";
                }
            })
        }
        //监听工具栏事件
        table.on("tool(currentTableFilter)",function(obj){
            switch (obj.event){
                case "edit":
                    obj.data._method="put"
                    openUpdateWindow(obj.data);
                    break;
                case "delete":
                    obj.data._method="delete"
                    deleteById(obj.data);
                    break;
                case "grantMenu":
                    openGrantMenuWindow(obj.data);
                    break;
            }
        })
        //添加角色
        form.on("submit(doSubmit)",function(data){
            console.log(data)
            $.post(url,data.field,function(result){
                if(result.success){
                    tableIns.reload()
                    layer.close(mainIndex);
                }else{
                    layer.msg(result.message);
                }
            },"json")
            return false;
        })
        //删除角色方法
        function deleteById(data){
            $.get("/admin/role/checkRoleHasEmployee",{"id":data.id},function(result){
                if(result.exist){
                    layer.msg(result.message)
                }else{
                    layer.confirm("确定要删除[<font color='red'>"+data.roleName+"</font>]吗",{icon:3,title:'提示'},function(index){
                        //发送删除角色的请求
                        $.post("/admin/role/deleteRole",{"id":data.id,"_method":data._method},function(res){
                            if(res.success){
                                tableIns.reload();
                            }
                            layer.msg(res.message)
                        },"json");
                        layer.close(index);
                    })
                }
            },"json")
        }
        //分配菜单
        function openGrantMenuWindow(data){
            //console.log(data)
            mainIndex=layer.open({
                type:1,
                area:["400px","550px"],
                title:"分配[<font color='red'>"+data.roleName+"</font>]的菜单",
                content:$("#selectRoleMenuDiv"),//引用的内容窗口
                btn:['确认','取消'],
                yes: function(index, layero){
                    //console.log('index 是',index,'layero:',layero)
                    var params = dtree.getCheckbarNodesParam("roleTree");
                    if(params.length!=0){
                        //console.log(params);
                        var midarr=[]
                        params.forEach(function(item){
                            midarr.push(item.nodeId)
                        })
                        var mids=midarr.join(",")
                        $.post("/admin/role/saveRoleMenu",{"mids":mids,"roleId":data.id},function(res){
                            if(res.success){
                                layer.msg("权限配置成功")
                                layer.close(index)
                            }
                        },"json")
                    }else{
                        layer.msg("请选择要分配的菜单");
                    }
                },
                calcel:function(index,layero){
                    console.log(layero)
                },
                success:function(){
                    dtree.render({
                        elem:"#roleTree",
                        url:"/admin/role/initMenuTree/"+data.id,
                        dataStyle:"layuiStyle",//使用layui 风格的数据格式
                        dataFormat:"list",//配置data的风格为 list
                        response:{message:"msg",statusCode:0},
                        checkbar:true,//开启复选框
                        checkbarType:"all" //默认是 all, 其他的值为 no-all 、 p-case 、 self-only
                    })
                }
            })
        }

    });
</script>

</body>
</html>
